import React, { useState } from 'react'
import { Layout, Button, theme, Dropdown, Avatar, Space } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
import { connect } from 'react-redux';

const { Header } = Layout;




function TopHeader(props) {
  // console.log(props)

  // const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  // 退出登录
  const logOut = () => {
    localStorage.removeItem('token')
    props.history.replace('/home')
  }


  const items = [
    {
      key: '1',
      label: (
        <div>
          {JSON.parse(localStorage.getItem('token')).role.roleName}
        </div>
      ),
    },
    {
      key: '2',
      label: (
        <div onClick={() => logOut()}>退出登录</div>
      ),
      danger: true
    }
  ];

  // 改变折叠状态
  const changeCollapsed = () => {
    // console.log(props)
    props.changeCollapsed()
  }
  return (
    <Header style={{ padding: 0, background: colorBgContainer }}>
      <Button
        type="text"
        icon={props.isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => changeCollapsed()}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64,
        }}
      />
      <div style={{ float: 'right', marginRight: '40px' }}>
        <span style={{ marginRight: '10px' }}>欢迎<span style={{ color: 'skyblue', fontWeight: 700 }}>{JSON.parse(localStorage.getItem('token')).username}</span>回来</span>
        <Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
          <Avatar icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header >
  )
}

// 公共状态
const mapStateToProps = ({ CollapsedReducer: { isCollapsed } }) => {
  // console.log(state)
  return {
    isCollapsed
  }
}

// 修改状态
const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: 'change-collapsed'
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))